// 添加分类
$(".add").on('click', function () {
    var add_str = `
        <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
        <div class="layui-form-item">
            <label class="layui-form-label">类别名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
            </div>
            <div class="layui-form-item">
            <label class="layui-form-label">类别别名</label>
            <div class="layui-input-block">
                <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
            </div>
            <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        </form>`;
    let layerIndex = layer.open({
        type: 1,
        title: '添加类别',
        content: add_str,
        area: ['500px', '250px'],
        success: function () {
            $(".add-form").on('submit', function (ev) {
                ev.preventDefault();
                addCatesAPI($(this).serialize(), res => {
                    load();
                    layer.close(layerIndex);
                })
            })
        }
    });
})

load();
// 渲染分类列表
function load() {
    catesListAPI({}, res => {
        $(".layui-table tbody").empty();
        res.data.data.forEach(obj => {
            $(".layui-table tbody").append(`<tr>
                <td>${obj.name}</td>
                <td>${obj.alias}</td>
                <td>
                    <button myid="${obj.Id}" data-name="${obj.name}" data-alias="${obj.alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>
                    <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
                </td>
            </tr>`)
        })
    })
}

// 删除分类
$(".layui-table tbody").on('click', '.delete', function () {
    let data = {
        id: $(this).attr('myid')
    };
    delCatesAPI(data, res => {
        $(this).parents('tr').remove();
        // load();
    })
})

// 修改分类
$(".layui-table tbody").on('click', '.edit', function () {
    let myid = $(this).attr('myid');
    let name = $(this).attr('data-name');
    let alias = $(this).attr('data-alias');
    var edit_str = `
    <form class="layui-form edit-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
        <div class="layui-form-item">
        <label class="layui-form-label">类别名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input" value="${name}">
        </div>
        </div>
        <div class="layui-form-item">
        <label class="layui-form-label">类别别名</label>
        <div class="layui-input-block">
            <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input" value="${alias}">
        </div>
        </div>
        <input type="hidden" name="Id" value="${myid}">
        <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit >确认修改</button>
        </div>
        </div>
    </form>`;
    layer.open({
        type: 1,
        title: '编辑类别',
        content: edit_str,
        area: ['500px', '250px'],
        success: function(layero, index){
            $(".edit-form").on('submit', function(ev){
                ev.preventDefault();
                let data = $(this).serialize();
                editCatesAPI(data, res => {
                    load();
                    layer.close(index);
                });
            })
        }
    })
})